<template>
    <div class="w-full h-full">
        <div class=" text-3xl">
            TOP 50 SONGS
        </div>
        <div class="w-full h-full grid grid-cols-3  gap-3">
            <div v-for="item in songs" :key="item.song_id">
                <SongCard :name="item.song_name" :pic="item.song_pic" :url="item.song_url" :id="item.song_id" />
            </div>
        </div>

    </div>
</template>
 
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router';
import SongCard from '@/components/SongCard.vue';
import axios from 'axios';
import { ElLoading } from 'element-plus';
const route = useRoute()
let singer_id = route.query.id
let songs = ref([])
ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)'
});
axios.get('http://127.0.0.1:8000/get_singer_top_song?singer_id=' + singer_id.toString()).then(res => {
    let resp = res.data
    songs.value = resp.data
    ElLoading.service().close()
})
</script> 
 
<style scoped></style>